<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="format-detection" content="telephone=no" />
    <link rel="stylesheet" href="./static/mobile/default/css/layout.css?v=2" />
    <link rel="icon" type="image/png" href="./static/favicon.ico" />
    <script src="./static/js/jquery/jquery/2.1.4/jquery.min.js"></script>
    
    <title>首页 - 达漂亮</title>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <script src="./static/js/jquery/jquery.cookie.js"></script>
    <script src="./static/mobile/default/js/page.js"></script>
    <link rel="stylesheet" href="./static/mobile/default/js/Swiper-4.0.7/swiper.min.css" />
    <link rel="stylesheet" href="./static/mobile/default/css/index.css" />


</head>

<body>
    <div class="page ">
        <div class="page-hd">
            <div class="header base-header bor-1px-b">
                <div class="header-left">
                    <a href="javascript:history.go(-1)" class="left-arrow"></a>
                </div>
                <div class="header-title">首页</div>
                <div class="header-right">
                    <!-- <a href=""></a> -->
                </div>
            </div>
        </div>



        <div class="page-bd">
            <!-- <div class="selectBox">
                <a href="./shop/index/search.html" class="selech">
                    <img src="./static/mobile/default/images/index_01.png" alt="" />
                    <span class="fs30 color_9">达漂亮</span>
                </a>
            </div> -->
            <div class="swiperGird" style="background-color: #fff;">
                <div class="swiper-container swiper1" id="swiper01">
                    <div class="swiper-wrapper">


                    </div>
                    <div class="swiper-pagination pagination1"></div>
                </div>
                <!-- 功能入口 -->
            </div>

            <!-- banner位 -->
            <div class="bannerBox">
                <!--头条-->
                <!-- <div class="bannerSwiper">
                    <img src="./static/mobile/default/images/index_icon09.png" alt="">
                    <span class="fs32 fw_b color_3">新闻头条</span>
                    <div class="swiper-container swiper2" id="swiper02">
                        <div class="swiper-wrapper">
                            <a href="./shop/article/headline.html" class="swiper-slide">达漂亮平台耀世开启</a>
                        </div>
                    </div>
                </div> -->
            </div>

            <!-- 商品标签 -->
            <!-- 商品标签 -->
            <!-- 两列显示方式 -->
            <!--
<div class="list" style="display:none">
    <a href="商品.html">
        <img src="../assets/images/youLike01.png" alt="">
        <span class="fs30 color_3">连帽系腰带鹅绒羽绒服</span>
        <div class="color_r fs22 num">
            <p class="fw_b fm_p">￥</p><em class="fs36">199</em><i>.00</i>
        </div>
    </a>
    <a href="商品.html">
        <img src="../assets/images/index_goods1.png" alt="">
        <span class="fs30 color_3">连帽系腰带鹅绒羽绒服</span>
        <div class="color_r fs22 num">
            <p class="fw_b fm_p">￥</p><em class="fs36">199</em><i>.00</i>
        </div>
    </a>
</div>-->
            <div class="youLike">
                <div class="navBox">
                    <div class="divActive" data-tag_id="0">
                        <span>精选</span>
                        <p>猜你喜欢</p>
                    </div>
                    <div data-tag_id="6">
                        <span>套餐专区</span>
                        <p>每日热搜</p>
                    </div>
                </div>
                <!-- 一列 -->
                <div class="list listBox" id="tagBox-0">

                </div>
                <div class="list listBox" id="tagBox-6"></div>
            </div>

            <script id="TagTpl" type="text/html">
    {{each data as goods index}}
    <a href='./shop/goods/info/id/goodInfo.html?goodsId={{goods.id}}'>
        <img   src="{{goods.list_pic_url}}"  class="lazy" >
        
        <div class="boxBottom">
        <span class="fs30 color_3">{{goods.name}}</span>
         <div class="fs22 color_9 promotion_desc" style='margin-right:.2rem;height:1rem'>
            <p>{{goods.promotion_desc}}</p></div>
            <div class="color_r fs22 num">
                <p class="fw_b fm_p">￥<em class="fs36">{{goods.retail_price}}</em></p>
            </div>
            <p class="fs24 color_r fw_b btn" >立即购买</p>
        </div>
    </a>
    {{/each}}
</script>
            <!-- 没有相关订单-->
            <script type="text/html" id="emptyTagTpl">
    <div class="empeyOrder">
        <img src="./static/mobile/default/images/emptyData.png" alt="">
        <span class="fs28 color_3">暂无相关商品</span>
    </div>
</script>
            <script src="./static/mobile/default/js/Swiper-4.0.7/swiper.min.js"></script>
            <script>

                var nowPage = [], getAgain = [], isLoadend = [];
                var _type = 0;
                $(function () {
                   
                    var swiper2 = createSwiper(2, 'vertical', 5000, 'bullets');
                    var swiper3 = createSwiper01();
                    getbannerData()
                    $('.page-bd').scroll(function () {
                        var box_h = $(this).height()
                        var content_h = $('.scrollBox').height()
                        var scroll_h = $(this).scrollTop();
                        if (content_h - box_h - scroll_h < 20) {
                            getList();
                        }
                    })

                    //获取banner数据
                    function getbannerData() {
                        var swiper = $('.swiper-wrapper')
                        var Concent = ''
                        $.ajax({
                            url: 'https://mp.jianguoes.com/api/mp/banner',
                            type: 'get',
                            headers:{'token': $.cookie('code')},
                            dataType: 'json',
                            success: function (res) {

                                for (let index = 0; index < res.data.banner.length; index++) {
                                    Concent += `<a href="` + res.data.banner[index].link + `" class="swiper-slide" bg_color="#ffffff">
                            <img src="`+ res.data.banner[index].image_url + `" class="swiper-lazy">
                        </a>`

                                }
                                swiper.html(Concent)
                                var swiper1 = createSwiper(1, 'horizontal', 4000, 'fraction');
                            }, error: function () {

                            }
                        });
                    }

                    //请求列表数据
                    function getList(isagain) {
                        page = nowPage[_type];
                        var objBox = $('#tagBox-' + _type);
                        var is_secKill = 1
                        if (typeof (page) == 'undefined') page = 1;
                        if (isLoadend[_type] == true) return false;
                        if (isagain == true) {
                            if (getAgain[_type] == false) return false;
                            getAgain[_type] = false;
                        } else {
                            $(objBox).append('<div class="get_list_tip" data-type="' + _type + '">加载数据中...</div>');
                        }
                        isLoadend[_type] = true;
                        if (_type == 6) {
                            is_secKill = 4
                        }
                        $.ajax({
                            url: 'https://mp.jianguoes.com/api/mp/index',// 跳转到 action
                            data: { is_secKill: is_secKill,size:10,page:page},
                            headers:{'token': $.cookie('code')},
                            dataType: 'json',
                            type: 'get',                          
                            success: function (res) {
                                console.log(res);
                                isLoadend[_type] = false;
                                if (res.errno != 0) {
                                    _alert(res.errmsg);
                                    getAgain[_type] = true;
                                    $(objBox).find('.get_list_tip').html('加载失败，点击重新加载.');
                                    return false;
                                }
                                nowPage[_type] = page + 1;
                               
                                $(objBox).find('.get_list_tip').remove();
                                if (res.data.data) {
                                    var goodsInfo = res.data.data
                                    $.cookie('goodsInfo',goodsInfo)
                                    $(objBox).append(template('TagTpl', res.data));
                                    
                                    console.log('33333'+$.cookie('goodsInfo'));
                                } else {
                                    $(objBox).html(template('emptyTagTpl'));
                                }
                                 $(".promotion_desc").each(function (i) {
                                    var divH = $(this).height();
                                    var $p = $("p", $(this)).eq(0);
                                    while ($p.outerHeight() > divH) {
                                        $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
                                    };
                        
                                })
                                if (res.data.totalPages == page) {
                                    $(objBox).append('<div class="get_list_tip">—— 我也有底线的 ——</div>');
                                    isLoadend[_type] = true;
                                }
                            }, error: function () {
                                isLoadend[_type] = false;
                                getAgain[_type] = true;
                                $(objBox).find('.get_list_tip').html('加载失败，点击重新加载.');
                            }
                        });
                    }
                    getList();//执行加载
                    //重新请求数据
                    $(document).on('click', '.get_list_tip', function () {
                        _type = $(this).data('tag_id');
                        getList(true);
                    })

                    $('.youLike .navBox div').on('click', function () {
                        var index = $(this).index();
                        _type = $(this).data('tag_id');
                        if ($('#tagBox-' + _type).html() == '') {
                            isLoadend[_type] = false;
                            getAgain[_type] = false;
                            getList();//执行加载
                        }
                        $(this).siblings().removeClass('divActive')
                        $(this).addClass('divActive')
                        $('.listBox').hide()
                        $('.listBox').eq(index).show()
                    })

                    $('.tab div').each(function () {
                        if ($(this).data('type') == _type) {
                            $(this).trigger('click');
                            isLoadend[_type] = false;
                            getAgain[_type] = false;
                        }
                    })
                    
                    
                })
            </script>



            <!-- 猜你喜欢 -->
            <div class="youLike hide">
                <div class="title">
                    <div class="left fs36 color_3 fw_b">猜你喜欢</div>
                    <a href="/shop/goods/index/is_best/1.html" class="right"><span class="fs26 color_9">更多</span><img
                            src="./static/mobile/default/images/rightIcon.png" alt=""></a>
                </div>
                <div class="list">
                    <div class="box">
                        <a href="/shop/goods/info/id/124.html">
                            <img src="./static/mobile/default/images/loading.svg"
                                data-original="./upload/gimg/2020/09/5f68609dd8f41_thumb.jpg" class="lazy" alt="">
                            <span class="fs30 color_3">茅源庆典酒（云仓6瓶/箱）</span>
                            <div class="color_r fs24 num">
                                <p class="fw_b fm_p">￥</p><em class="fs36">500</em>
                                <p>.00</p>
                            </div>
                        </a>
                        <a href="/shop/goods/info/id/130.html">
                            <img src="./static/mobile/default/images/loading.svg"
                                data-original="./upload/gimg/2020/09/5f6889dac34d6_thumb.jpg" class="lazy" alt="">
                            <span class="fs30 color_3">荣和酒庄酒(6瓶/箱)</span>
                            <div class="color_r fs24 num">
                                <p class="fw_b fm_p">￥</p><em class="fs36">500</em>
                                <p>.00</p>
                            </div>
                        </a>
                        <a href="/shop/goods/info/id/129.html">
                            <img src="./static/mobile/default/images/loading.svg"
                                data-original="./upload/gimg/2020/09/5f66ff804ccc0_thumb.jpg" class="lazy" alt="">
                            <span class="fs30 color_3">多彩贵州原酒（6瓶/箱）</span>
                            <div class="color_r fs24 num">
                                <p class="fw_b fm_p">￥</p><em class="fs36">500</em>
                                <p>.00</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>


            <div class="copyright">
                Copyright © 达漂亮<br>
            </div>
            <div class="bottom-tabbar-wrapper">
                <div class="bottom-tabbar">
                    <a href="./index.html" class="bottom-tabbar__item">
                        <span class="icon">
                            <img src="./static/menuimg/footer_index_a.png" />
                            <img class="lhimg" src="./static/menuimg/footer_index_b.png" />
                        </span>
                        <p class="label">首页</p>
                    </a>
                    <!-- <a href="./shop/index/allsort.html" class="bottom-tabbar__item">
        <span class="icon">
            <img src="./static/menuimg/footer_cat_a.png"/>
            <img class="lhimg" src="./static/menuimg/footer_cat_b.png"/>
        </span>
          <p class="label">分类</p>
      </a> -->
                    <a href="./shop/flow/cart.html" class="bottom-tabbar__item">
                        <span class="icon">
                            <img src="./static/menuimg/footer_cart_a.png" />
                            <img class="lhimg" src="./static/menuimg/footer_cart_b.png" />
                        </span>
                        <p class="label">购物车</p>
                    </a>
                    <a href="./shop/order/index.html" class="bottom-tabbar__item">
                        <span class="icon">
                            <img src="./static/menuimg/footer_cat_a.png" />
                            <img class="lhimg" src="./static/menuimg/footer_cat_b.png" />
                        </span>
                        <p class="label">我的订单</p>
                    </a>
                    <a href="./member/center/index.html" class="bottom-tabbar__item">
                        <span class="icon">
                            <img src="./static/menuimg/footer_user_a.png" />
                            <img class="lhimg" src="./static/menuimg/footer_user_b.png" />
                        </span>
                        <p class="label">我的</p>
                    </a>
                </div>
            </div>
            <script>
                var index = 0;
                function setSelect(url) {
                    $('.bottom-tabbar a').each(function (i, val) {
                        var thisUrl = $(this).attr('href');
                        var sear = new RegExp(thisUrl);
                        if (sear.test(url)) {
                            index = i;
                        }
                    });
                }
                $(function () {
                    var curUrl = window.location.href;
                    setSelect(curUrl);
                    if (index == -1) {
                        var referrer = document.referrer;
                        setSelect(referrer);
                    }
                    $('.bottom-tabbar a').eq(index).addClass('active');
                })
            </script>
        </div>


    </div>

    <script src="./static/js/art-template.js"></script>
    <script src="./static/mobile/default/js/lib/fastclick.js"></script>
    <script src="./static/js/jquery/lazyload/jquery.lazyload.js"></script>
    <script>
        $(function () {
            FastClick.attach(document.body);
            $("img.lazy").lazyload({ effect: "fadeIn", event: "scroll", container: $(".page-bd") });
        });
    </script>


    <script>

        function createSwiper(index, _direction, time, type) {
            var swiper = new Swiper(".swiper" + index, {
                pagination: {
                    el: ".pagination" + index,
                    type: type
                },
                // lazy: {
                //     loadPrevNext: true,
                // },
                direction: _direction,
                preloadImages: false,
                paginationClickable: true,
                loop: true,
                autoplay: {
                    delay: time,
                    disableOnInteraction: false
                },
                onSlideChangeEnd: function (swiper) {
                    swiper.update(); //swiper更新
                },
                on: {
                    slideChangeTransitionStart: function () {
                        if (index == 1) {
                            var bg_color = $('#swiper01').find('a').eq(this.activeIndex).data('bg_color');
                            $('.swiperGird').css('background-color', bg_color);
                        }
                    },
                },
            });
            return swiper;
        }
        function createSwiper01() {
            var length = $('.groupBox .grouplist .swiper-slide').length;
            var is_true = length > 1 ? true : false;
            var el = is_true == true ? ".pagination3" : "null";
            var swiper = new Swiper(".swiper3", {
                pagination: {
                    el: el,
                    clickable: true
                },
                loop: is_true,
                onSlideChangeEnd: function (swiper) {
                    swiper.update(); //swiper更新
                }
            });
            return swiper;
        }

    </script>




    <div class="alertBox">
        <div class="alertBG"></div>
        <div class="alert">
            <div class="text fs30 color_3 bor_b">

            </div>
            <!-- 单按钮 -->
            <div class="button fs32 fw_b color_r">
                知道了
            </div>
            <!-- 双按钮 -->
            <div class="buttonBox fs32 fw_b">
                <span class="color_9 bor_r cancel">取消</span>
                <span class="color_r confirm">确定</span>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var is_xcx = 0;
        $(document).on('click', 'a', function () {
            var href = $(this).attr('href');
            if (href.indexOf('/pages') != -1) {
                if (is_xcx == 1) {
                    wx.miniProgram.navigateTo({
                        url: href
                    })
                    return false;
                } else {
                    return false;
                }
            }
        })
    </script>
</body>

</html>